<template>
<div id="shop-item" >
<!--  {{product}}-->
  <div class="item-selector">
    <check-button :is-checked="product.checked"  @click="checkActive" />
  </div>
  <div class="item-img">
    <img :src="product.image" alt="商品图片">
  </div>
  <div class="item-info">
    <div class="item-title">{{product.title}}</div>
    <div class="item-desc">{{product.desc}}</div>
    <div class="info-bottom">
      <div class="item-price left">¥{{product.price}}</div>
      <div class="item-count right">
        <button @click="subClick" class="item-btn" :style="btnColor" >-</button>
        &nbsp;<span class="item-product-count">{{product.count}} </span>&nbsp;
        <button @click="addClick" class="item-btn">+</button>
      </div>


    </div>
  </div>
</div>
</template>

<script>
import CheckButton from "components/content/checkButton/CheckButton";
export default {
  name: "CartListItem",
  components: {
    CheckButton
  },
  props: {
    product: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data(){
    return {
      isChecked: true,
    }
  },
  computed:{
    btnColor(){
      return this.product.count == 1 ? {color: '#e9e9e9'} : {color: 'black'}
    }
  },
  methods: {
    checkActive(){
      return this.product.checked = !this.product.checked
    },
    subClick(){

      return this.product.count==1 ? this.product.count : this.product.count--
    },
    addClick(){
      return this.product.count++
    }
  }
}
</script>

<style scoped>
#shop-item {
  width: 100%;
  display: flex;
  padding: 5px;
  border-bottom: 1px solid #ccc;
}

.item-selector {
  width: 14%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item-title, .item-desc {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.item-img {
  padding: 5px;
  /*border: 1px solid #ccc;*/
}

.item-img img {
  width: 80px;
  height: 100px;
  display: block;
  border-radius: 5px;
}

.item-info {
  font-size: 17px;
  color: #333;
  padding: 5px 10px;
  position: relative;
  overflow: hidden;
}

.item-info .item-desc {
  font-size: 14px;
  color: #666;
  margin-top: 15px;
}

.info-bottom {
  margin-top: 10px;
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
}

.info-bottom .item-price {
  color: orangered;
}

.item-btn{
  border: none;
  background-color: #fff;
  width: 10px;
  font-size: 16px;
  font-weight: 500;
}
.item-product-count{
  font-size: 13px;
  display: inline-block;
  background-color: #eee;
  width: 30px;
  text-align: center;
}

</style>
